<template>
	<view class="item" @tap="swiperClick">
		<view class="top">
			<text>{{ item.project_title }}</text>
			<text class="cate cate1" v-if="item.prjInfo && item.prjInfo.cate === 1">
				上门按摩
			</text>
			<text class="cate cate2" v-if="item.prjInfo && item.prjInfo.cate === 2">
				助娱向导
			</text>
			<text class="wait">{{ orderStatus }}</text>
		</view>
		<view class="middle">
			<u-image
				border-radius="60"
				height="118"
				width="118"
				:src="item.shifu_avatar"
			></u-image>
			<view class="right">
				<text class="text_1">{{ item.shifu_name }}</text>
				<text class="text_2">{{ item.time }}</text>
			</view>
		</view>
		<view class="end">
			<view class="price">￥{{ vk.pubfn.priceFilter(item.real_pay) }}</view>
			<view class="btn cancel" v-if="cancelShow" @tap.stop="cancel">取消订单</view>
			<view class="btn" v-if="item.status === 0" @tap.stop="payJump">立即支付</view>
			<view class="btn" v-if="reShow" @tap.stop="replaceItem">切换项目</view>
			<view class="btn" v-if="item.status === 5" @tap.stop="bellAdd">加钟</view>
			<view class="btn" v-if="item.status === 6" @tap.stop="confirm">确认订单</view>
			<view class="btn" v-if="item.status === 7" @tap.stop="appraise">去评价</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "order-item",
	props: {
		item: { Type: Object }
	},
	data() {
		return {
			cates: [
				"待支付",
				"待接单",
				"已接单",
				"已出发",
				"已到达",
				"服务中",
				"待确认",
				"待评价",
				"已完成",
				"已取消"
			],
			arr: [0, 1],
			arr2: [1, 2, 3, 4]
		}
	},
	computed: {
		orderStatus() {
			if (this.item.cancel_query === 1) {
				return "申请取消中"
			}
			return this.cates[this.item.status]
		},
		cancelShow() {
			let s = this.item.status
			let c = this.item.cancel_query
			return this.arr.indexOf(s) !== -1 && c !== 1
		},
		reShow() {
			let s = this.item.status
			return this.arr2.indexOf(s) !== -1
		}
	},
	methods: {
		swiperClick() {
			vk.navigateTo(`/pages/order/detail?_id=${this.item._id}`)
		},
		// 支付
		payJump() {
			let now = new Date().getTime()
			let util = this.item._add_time + 10 * 60 * 1000
			if (this.item.status === 0 && util <= now) {
				vk.toast("订单已超时", "none", 1000, () => {
					this.$emit("timeout", this.item)
				})
				return
			}
			vk.navigateTo(`/pages/project/order-pay?id=${this.item._id}`)
		},
		// 取消订单
		cancel() {
			this.$emit("cancel", this.item)
		},
		// 签字确认
		confirm() {
			this.$emit("confirm", this.item)
			vk.setStorageSync("fresh", 1)
		},
		// 去评价
		appraise() {
			this.$emit("appraise", this.item)
			vk.setStorageSync("fresh", 1)
		},
		// 切换项目
		replaceItem() {
			vk.navigateTo(`/pages/order/replace?id=${this.item._id}`)
			vk.setStorageSync("fresh", 1)
		},
		// 加钟
		bellAdd() {
			vk.navigateTo(`/pages/order/bells?id=${this.item._id}`)
			vk.setStorageSync("fresh", 1)
		}
	}
}
</script>

<style lang="scss" scoped>
.item {
	background: #ffffff;
	border-radius: 12rpx;
	margin: 20rpx;
	padding: 24rpx;
}

.top {
	font-size: 30rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	.cate {
		font-size: 22rpx;
		border-radius: 20rpx;
		width: 106rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 14rpx;
		font-weight: normal;
	}
	.cate1 {
		color: #3dd5a6;
		border: 1rpx solid #3dd5a6;
	}
	.cate2 {
		color: #ff9900;
		border: 1rpx solid #ff9900;
	}
	.wait {
		color: #ff9900;
		flex: 1;
		text-align: right;
	}
}

.middle {
	background: #f4f6f9;
	border-radius: 12rpx;
	margin: 20rpx 0;
	padding: 24rpx 16rpx;
	display: flex;
	align-items: center;
	.right {
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		padding-left: 24rpx;
		.text_1::before {
			content: "服务技师：";
			color: #999999;
		}
		.text_2 {
			margin-top: 20rpx;
		}
		.text_2::before {
			content: "预约时间：";
			color: #999999;
		}
	}
}

.end {
	display: flex;
	align-items: center;
	.price {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff0000;
		flex: 1;
		&::before {
			content: "总计: ";
			color: #333333;
			font-weight: normal;
			font-size: 26rpx;
		}
	}
	.btn {
		border: 2rpx solid #24c388;
		background-color: #24c388;
		border-radius: 28rpx;
		padding: 8rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 26rpx;
		margin-left: 16rpx;
	}
	.cancel {
		border: 2rpx solid #24c388;
		background-color: #fff;
		color: #24c388;
	}
}
</style>
